<template>
	<view class="box-bg">
		<uni-nav-bar 
			shadow 
			color="#F7F7F7" 
			left-icon="left" 
			backgroundColor="#3485FD" 
			height="65px" 
			title="洗车" 
			@clickLeft="back" 
		/>
	</view>
    <view class="container">
      <!-- 顶部图片和标题 -->
      <view class="header">
        <image class="shop-img" src="/static/Mysql.jpg" mode="aspectFill"></image>
      </view>
      <!-- 店铺信息 -->
      <view class="shop-info">
        <view class="shop-name">车百事汽车生活馆</view>
        <view class="shop-rating">
          <uni-rate allow-half :value="4" size="23"/>
          <text class="score">4分</text>
          <text class="sales">销量：556</text>
        </view>
        <view class="shop-detail">
          <view>营业时间：周一至周五 早上8:00-晚上22:00</view>
          <view>位置：山阳区人民路与解放路交叉口</view>
        </view>
      </view>

      <!-- 服务项目 -->
      <view class="service-section">
        <view class="service-title">服务项目</view>
        <view class="service-tabs">
          <radio-group :value="serviceType" class="service-radio">
            <label v-for="item in serviceList" :key="item.value" class="service-label">
              <radio :value="item.value" :checked="serviceType === item.value" />
              {{ item.label }}
            </label>
          </radio-group>
        </view>
        <view class="service-price">
          <text class="price">￥35.9</text>
          <text class="old-price">￥60</text>
        </view>
        <view class="service-desc">精洗服务的详细介绍</view>
      </view>

      <!-- 服务评价 -->
      <view class="comment-section">
        <view class="comment-title">服务评价</view>
        <view class="comment-item" v-for="(item, idx) in comments" :key="idx">
          <image class="avatar" :src="item.avatar" />
          <view class="comment-content">
            <view class="comment-header">
              <text class="user">{{ item.user }}</text>
              <text class="date">{{ item.date }}</text>
            </view>
            <uni-rate allow-half :value="5" size="18"/>
            <view class="comment-text">{{ item.text }}</view>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="footer">
        <button class="contact-btn" @click="toggle('bottom')">联系客服</button>
        <button class="order-btn" type="primary">立即下单</button>
      </view>
	  <uni-popup ref="popup" background-color="#fff" >
	  	<view class="main2" :class="{ 'popup-height': type === 'left' || type === 'right' }">
	  		<view class="lianxi">
	  			<text>18642589456</text>
	  		</view>
	  		<view class="lianxi">
	  			<text>复制</text>
	  		</view>
	  		<view class="lianxi">
	  			<text>取消拨号</text>
	  		</view>
	  	</view>
	  </uni-popup>
    </view>
  </template>

  <script setup>
  import { ref } from 'vue';

  // 响应式数据
  const type = ref('center');
  const serviceType = ref('精洗');
  const serviceList = ref([
    { label: '普通洗车', value: '普通洗车' },
    { label: '精洗', value: '精洗' },
    { label: '内饰清洗', value: '内饰清洗' },
    { label: '其他', value: '其他' }
  ]);
  const comments = ref([
    {
      avatar: '/static/liuying.jpg',
      user: '黄**',
      date: '2022-12-31',
      text: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！'
    }
    // 可复制多条
  ]);

  // 方法
  const back = () => {
    uni.navigateBack();
  };

  const toggle = (typeVal) => {
    type.value = typeVal;
    // 通过 ref 访问组件实例方法
    popup.value?.open(typeVal);
  };

  // 注册 uni-popup 组件引用
  const popup = ref(null);
  </script>
  
  <style scoped>
  .box-bg{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
   }
  .container {
    background: #f8f8f8;
    min-height: 100vh;
  }
  .header {
    background: linear-gradient(180deg, #3b8cff, #ffffff 80%);
    padding-bottom: 10rpx;
	height: 560rpx;
  }
  .shop-img {
    width: 88%;
    height: 390rpx;
    border-radius: 20rpx;
    margin-top: 125rpx;
	margin-left: 6%;
  }
  .title {
    position: absolute;
    top: 20rpx;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 40rpx;
    font-weight: bold;
  }
  .shop-info {
    background: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 24rpx;
  }
  .shop-name {
    font-size: 36rpx;
    font-weight: bold;
  }
  .shop-rating {
    margin-top: 10rpx;
    color: #888;
    font-size: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 60%;
	
  }
  .shop-detail {
    margin-top: 10rpx;
    color: #666;
    font-size: 24rpx;
  }
  .service-section {
    background: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 24rpx;
  }
  .service-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  .service-label {
    margin-right: 32rpx;
    font-size: 26rpx;
  }
  .service-price {
    color: #ff4d4f;
    font-size: 36rpx;
    margin-bottom: 8rpx;
  }
  .old-price {
    color: #bbb;
    text-decoration: line-through;
    font-size: 24rpx;
    margin-left: 10rpx;
  }
  .service-desc {
    color: #888;
    font-size: 26rpx;
  }
  .comment-section {
    background: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 24rpx;
  }
  .comment-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  .comment-item {
    display: flex;
    margin-bottom: 20rpx;
  }
  .avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .comment-content {
    flex: 1;
  }
  .comment-header {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #888;
  }
  .stars {
    color: #ffb400;
    font-size: 28rpx;
  }
  .comment-text {
    color: #333;
    font-size: 28rpx;
    margin-top: 4rpx;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .contact-btn {
    flex: 1;
    margin-right: 20rpx;
    background: #f0f0f0;
    color: #007aff;
  }
  .order-btn {
    flex: 2;
  }
  .main2{
  display: flex;
 	align-items: center;
 	justify-content: center;
 	padding-bottom: 15px;
 	height: 120px;
 	background-color:#fff;
	position: relative;
	top: 0;
  }
  .lianxi{
 	  font-size: 35rpx;
 	  display: flex;
 	  justify-content: center;
 	  margin-top: 20rpx;
 	  margin-bottom: 20rpx
  }
  </style>